<template>
  <div>
    <fmsx-form ref="form" :model="form" :options="formOptions" @submit="submitForm" />
    <div class="fivs-all-title">
      <span
        ><strong>入库单明细</strong>
        <!-- <span class="tips-item">
          总数量：<strong>{{ allNum }}</strong>
        </span> -->
      </span>
    </div>
    <fmsx-form ref="fmsxTableRef" :model="model" :options="options" @submit="submitFormTable" />
  </div>
</template>

<script>
import wipApi from '@/api/fmsx/wip'
import moment from 'moment'

export default {
  desc: '在制品入库单申请表单',
  name: 'InboundApplyFrom',
  components: {},
  props: {
    disableSubmit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {},
      model: {
        formTable: []
      },
      formOptions: {
        isSubmitBtn: false,
        isEmptyBtn: false,
        details: this.disableSubmit,
        group: [
          {
            icon: '',
            label: '',
            column: [
              {
                label: '工单号',
                prop: 'moNum',
                type: 'input',
                rules: [{ required: false, message: '' }],
                span: 4,
                display: !this.disableSubmit,
                options: {
                  value: '',
                  noKeyUpSubmit: true
                },
                events: {
                  keyup: (event) => {
                    if (event.keyCode === 13) {
                      this.moNumChange(event.target._value)
                    }
                  },
                  blur: (event) => {
                    this.moNumChange(event.target._value)
                  }
                }
              },
              {
                label: '入库单号',
                prop: 'entryNo',
                type: 'input',
                details: true,
                display: this.disableSubmit,
                span: 4
              },
              {
                label: '日期',
                prop: 'dates',
                type: 'jDate',
                options: {
                  defaultValue: moment().format('YYYY-MM-DD'),
                  valueFormat: 'YYYY-MM-DD',
                  format: 'YYYY-MM-DD'
                },
                display: true,
                rules: [{ required: true, message: '' }],
                span: 4
              },
              {
                label: '备注',
                prop: 'remark',
                type: 'input',
                span: 8,
                display: true
              },
              {
                label: '申请人',
                prop: 'createBy',
                type: 'input',
                details: true,
                display: this.disableSubmit,
                span: 4
              },
              {
                label: '申请人部门',
                prop: 'applyDepartId_dictText',
                type: 'input',
                details: true,
                display: this.disableSubmit,
                span: 4
              },
              {
                label: '申请时间',
                prop: 'createTime',
                type: 'input',
                details: true,
                display: this.disableSubmit,
                span: 4
              },
              {
                label: '操作人',
                prop: 'updateBy',
                type: 'input',
                details: true,
                display: this.disableSubmit,
                span: 4
              },
              {
                label: '操作时间',
                prop: 'updateTime',
                type: 'input',
                details: true,
                display: this.disableSubmit,
                span: 4
              }
            ]
          }
        ]
      },
      options: {
        details: false,
        isSubmitBtn: false,
        isEmptyBtn: false,
        details: this.disableSubmit,
        group: [
          {
            icon: '',
            label: '',
            column: [
              {
                label: '',
                prop: 'formTable',
                type: 'formTable',
                span: 24,
                children: {
                  type: 'table',
                  checkBox: false,
                  isAdd: false,
                  isInsert: false,
                  isDelete: true,
                  isPagination: false,
                  isShowOptions: false,
                  isShowColumn: false,
                  column: [
                    {
                      label: '工单号',
                      prop: 'moNum',
                      align: 'left',
                      width: 100,
                      details: true
                    },
                    {
                      label: '客户代码',
                      prop: 'custCode',
                      align: 'left',
                      width: 100,
                      details: true
                    },
                    {
                      label: '图号',
                      prop: 'dwgNo',
                      align: 'left',
                      details: true,
                      width: 200
                    },
                    {
                      label: '版本',
                      prop: 'rev',
                      align: 'left',
                      width: 100,
                      details: true
                    },
                    {
                      label: '工序顺序',
                      prop: 'operationNum',
                      details: true,
                      display: false,
                      value: ''
                    },
                    {
                      label: '工序代码',
                      prop: 'processId',
                      details: true,
                      display: false,
                      value: ''
                    },
                    {
                      label: '工序名称',
                      prop: 'processName',
                      details: true,
                      display: false,
                      value: ''
                    },
                    {
                      label: '工序名称',
                      type: 'fmsxSelect',
                      prop: 'operationNumStr',
                      rules: [{ required: true, message: '' }],
                      options: {
                        defaultDataProp: { label: 'operationNumStr', value: 'operationNumStr' },
                        url: '/prod-pre/make/makeApplyEntryItem/getReportList',
                        prop: { label: 'operationNumStr', value: 'operationNumStr' },
                        isPagination: true,
                        params: (m) => {
                          return {
                            moNum: m.moNum,
                            workReportType: 1
                          }
                        }
                      },
                      events: {
                        rowChange: (row, itemOption, rowOption, rowIndex) => {
                          if (this.processObj[itemOption.options.value]) {
                            this.$refs.fmsxTableRef.setTableColumRowValue('formTable', row, rowIndex, {
                              processId: { value: this.processObj[itemOption.options.value].processId },
                              operationNum: { value: this.processObj[itemOption.options.value].operationNum },
                              entryQuantity: { value: this.processObj[itemOption.options.value].finishSum },
                              processName: { value: this.processObj[itemOption.options.value].processName }
                            })
                          }
                        },
                        change: ({ processId, processName, operationNum, finishSum, operationNumStr }) => {
                          this.processObj[operationNumStr] = {
                            processName,
                            processId,
                            operationNum,
                            finishSum
                          }
                        }
                      }
                    },
                    {
                      label: '生产数量',
                      prop: 'productionQuantity',
                      align: 'left',
                      width: 100,
                      details: true
                    },
                    {
                      label: '数量',
                      prop: 'entryQuantity',
                      type: 'input-number',
                      rules: [{ required: true, message: '' }],
                      align: 'left',
                      width: 80,
                      options: {
                        min: 0
                      },
                      events: {
                        rowChange: (info) => {
                          if (!info.entryQuantity) {
                            info.entryQuantity = null
                          }
                          if (info.entryPrice && info.entryQuantity) {
                            info.entryTotalPrice = (info.entryPrice * info.entryQuantity).toFixed(2)
                            this.countTotal()
                          }
                        }
                      }
                    },
                    {
                      label: '仓库名称',
                      display: this.disableSubmit,
                      details: true,
                      prop: 'wmsId_dictText'
                    },
                    {
                      label: '货架名称',
                      display: this.disableSubmit,
                      details: true,
                      prop: 'shelvesId_dictText'
                    },
                    {
                      label: '储位名称',
                      display: this.disableSubmit,
                      details: true,
                      prop: 'storageId_dictText'
                    }
                  ]
                },
                events: {
                  change: () => {
                    this.countTotal()
                  }
                }
              }
            ]
          }
        ]
      },
      status: 10,
      formModel: {},
      allNum: 0,
      isAdd: true,
      isInfo: false,
      processObj: {}
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.isAdd) {
        this.$refs.form.updateFieldOptions('dates', {
          value: this.moment().format('YYYY-MM-DD')
        })
      }
    })
  },
  methods: {
    moment,
    countTotal() {
      const list = this.$refs.fmsxTableRef.getFormFieldModel('formTable')
      let allNum = 0
      list.forEach((item) => {
        if (item.entryQuantity) {
          allNum = allNum + Number(item.entryQuantity)
        }
      })
      this.allNum = allNum.toFixed(2)
    },
    getInfoList(item) {
      wipApi.inbound.getItemList({ applyEntryId: item.id }).then((res) => {
        this.$refs.fmsxTableRef.updateFieldOptions('formTable', {
          value: res.records.map((v) => {
            return {
              ...v,
              operationNumStr: `${v.operationNum}(${v.processName})`
            }
          })
        })
      })
    },
    edit(item, type) {
      delete item.moNum
      this.isAdd = false
      this.form = item
      this.getInfoList(item)
    },
    handleDetail(item) {
      this.isInfo = true
      this.form = item
      this.getInfoList(item)
    },
    moNumChange(item) {
      if (!item) {
        return
      }
      let list = this.$refs.fmsxTableRef.getFormFieldModel('formTable')
      if (list.some((v) => v.moNum === item)) {
        this.$message.error('工单重复')
        return
      }
      wipApi.inbound.getItem({ moNum: item }).then((res) => {
        if (res && res.dwgNo) {
          list.push({
            ...res,
            processId: res.processId,
            operationNum: res.operationNum,
            processName: res.processName,
            dwgNo: res.dwgNo,
            entryQuantity: res.finishSum,
            rev: res.rev,
            entryQuantity: res.entryQuantity,
            moNum: res.moNum,
            custCode: res.custCode,
            operationNumStr: `${res.operationNum}(${res.processName})`
          })
          this.$refs.fmsxTableRef.updateFieldOptions('formTable', {
            value: list
          })
          this.$refs.form.updateFieldOptions('moNum', { value: '' })
        } else {
          this.$message.error('请输入正确的单号')
          if (type != 2) {
            this.$refs.fmsxTableRef.clearTableDataSource('formTable')
          }
        }
      })
    },
    submitForm(model, callback) {
      this.formModel = model
      this.$refs.fmsxTableRef.submitFun()
      callback()
    },
    submitFormTable(model, callback) {
      if (model.formTable.length < 1) {
        this.$message.error('请添加入库单明细')
        callback()
        return
      }

      if (this.formModel.id) {
        wipApi.inbound
          .edit({
            ...this.formModel,
            itemList: model.formTable
          })
          .then(() => {
            this.$message.success('提交成功')
            this.$emit('ok')
          })
          .finally(() => {
            callback()
          })
        return
      }
      wipApi.inbound
        .add({
          ...this.formModel,
          itemList: model.formTable
        })
        .then(() => {
          this.$message.success('提交成功')
          this.$emit('ok')
        })
        .finally(() => {
          callback()
        })
    },
    submit(status) {
      this.status = status
      this.$refs.form.submitFun({ status })
    }
  }
}
</script>

<style lang="less" scoped>
.fivs-all-title {
  display: flex;
  align-items: center;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  color: rgba(0, 0, 0, 1);
  span {
    padding-left: 15px;
    display: flex;
    align-items: center;
  }
  &:before {
    content: '';
    display: inline-block;
    // position: absolute;
    margin-bottom: -6px;
    width: 4px;
    height: 24px;
    background: rgba(0, 129, 255, 1);
    z-index: 2;
  }
}
.tips-item {
  font-size: 16px;
  strong {
    color: rgb(234, 85, 6);
  }
}
</style>
